<template>
	<view>
		<dsl-navbar title="" isBack bgTopImg="white"></dsl-navbar>
		<view class="user_image" style="margin-top: 100rpx;">
			<image src="https://img1.baidu.com/it/u=1897719880,2867606276&fm=26&fmt=auto" mode="aspectFill"
				class="user_image"></image>
			<image src="/static/user/imgxiangji-2.png" mode="" class="user_camera"></image>
		</view>
		<view class="rowsa padding">
			<view class="sex_button align-center rowsc">
				<image src="/static/user/imgnan.png" mode="" class="sex_icon"></image>
				<view style="color: #218DFF;">男生</view>
			</view>
			<view class="sex_button align-center rowsc" style="background-color: #FFEEF3;">
				<image src="/static/user/imgnu.png" mode="" class="sex_icon"></image>
				<view style="color: #FF4C83;">女生</view>
			</view>
		</view>
		<view class="padding solid-bottom rowsb align-center marign-lr">
			<view class="text-bold">昵称</view>
			<input type="text" value="" placeholder="取个名字吧!" class="text-right" placeholder-style="color:#9AA2B5" />
		</view>
		<view class="padding solid-bottom rowsb align-center marign-lr">
			<view class="text-bold">昵称</view>
			<picker mode="date" :range="date" @change="changeDate">
				<view :style="{color:date?'#9AA2B5;':''}">{{date ||'选择出生日期'}}</view>
			</picker>
		</view>
		<view class="submit">
			完成
		</view>
		<view class="align-center rowsc margin-top-sm">
			<image src="/static/user/imgtanhao.png" mode="widthFix" style="width: 30rpx;"></image>
			<text class="margin-left-sm text-sm" style="color: #EAA019;">性别提交后不可更改</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				date: ''
			}
		},
		//生命周期函数
		onReady() {},
		onLoad() {},
		onShow() {},
		methods: {
			changeDate(e){
				
			}
		},
		computed: {},
		components: {}
	}
</script>

<style>
	.user_image {
		width: 143rpx;
		height: 143rpx;
		background: #218DFF;
		border-radius: 50%;
		position: relative;
		margin: 0 auto;
	}

	.user_camera {
		width: 52rpx;
		height: 52rpx;
		position: absolute;
		bottom: 0;
		right: 0;
	}

	.sex_button {
		width: 156rpx;
		height: 66rpx;
		background: #CBE4FD;
		opacity: 1;
		border-radius: 33rpx;
		line-height: 66rpx;

	}
	.sex_icon {
		width: 50rpx;
		height: 50rpx;
	}
	.submit{
		width: 360rpx;
		height: 101rpx;
		background: linear-gradient(180deg, #EAA019 0%, #BA4949 100%);
		opacity: 1;
		line-height: 110rpx;
		text-align: center;
		color: white;
		border-radius: 99rpx;
		margin: 0 auto;
		margin-top: 100rpx;
	}
</style>
